<template>
	<div class="product-list-rd">
		<ul class="prod-box">
            <li v-for="data in prodDatas">
                <router-link tag="a" :to="'/product/'+data.id">
                    <div class="more-prod-loadImg">
                        <img :src="data.image[0]" class="prod-img">
                    </div>
                    <span class="prod-name" v-text="data.product_name"></span>
                    <p class="prod-price">
                    	<span class="now-price">￥<span class="big-price" v-text="data.big_price"></span><span class="small-price" v-if="data.small_price">.{{data.small_price}}</span>
                    	</span>
                    </p>
                </router-link>
            </li>
        </ul>
	</div>
</template>

<style scoped lang='scss'>
	.prod-box{overflow: hidden;}
	.prod-box li{
		float: left;
	    width: 50%;
	    padding-bottom: 4px;
	    position: relative;

	    &:nth-child(odd) {
		    padding-right: 2px;
		}
		// &:nth-child(even) {
		//     padding-left: 3px;
		// }

	    .prod-img{
	    	width:100%;
	    	height:a(370px);
	    }
	    .prod-name{
	    	display: inline-block;
    	    height: 33px;
    	    width:100%;
		    font-size: 13px;
		    overflow: hidden;
		    -o-text-overflow: ellipsis;
		    text-overflow: ellipsis;
		    -webkit-line-clamp: 2;
		    -webkit-box-orient: vertical;
		    word-break: break-word;
		    color: #232326;
		    margin-top: 5px;
		    line-height: 17px;
		    margin-bottom: 3px;
		    padding: 0 4px;
	    }
	    .prod-price{
	    	height: 23px;
		    font-size: 13px;
		    overflow: hidden;
		    .now-price{
		    	color: #f23030;
			    display: inline-block;
			    padding: 0 5px 0 4px;
			    position: relative;
			    top: 1px;
			    height: 25px;
			    line-height: 25px;

			    .big-price{font-size: 16px;}
			    .small-price{font-size: 12px;}
		    }
	    }
	}

	
</style>

<script>
	export default{
		name:"product-list",
		props:["prodDatas"],
		data(){
			return{
			}
		},
		mounted(){	
			this.$nextTick(()=>{
				this.loadData()
				//if(this.isInfinite) this.loadData()

			})
		},
		methods:{
			loadData(){
				// this.scrollDatas = [
				// 	{name:"da1",price:15555,imgs:[{url:"http://img5.imgtn.bdimg.com/it/u=3119146719,1611218352&fm=15&gp=0.jpg"}]},
				// 	{name:"da2",price:4444,imgs:[{url:"http://img5.imgtn.bdimg.com/it/u=3119146719,1611218352&fm=15&gp=0.jpg"}]}
				// ].concat(this.prodDatas)
			}
		}
	}

</script>